<template>
  <div class="business">
    <!-- 商家信息框 -->
    <div v-if="businessInfo" class="business-card">
      <!-- 商家头像 -->
      <div class="business-avatar">
        <img :src="businessInfo.logo" alt="商家头像" />
      </div>
      <!-- 商家信息 -->
      <div class="business-info">
        <h3 class="business-name">{{ businessInfo.merchantname }}</h3>
        <p class="business-rating">评分：{{ businessInfo.appraise }}/5 | {{ businessInfo.comments }}</p>
      </div>
      <!-- 联系客服按钮 -->
      <div class="business-actions">
        <button class="contact-btn" @click="contactSupport">
          <img src="../commodity/img/cs.svg" style="margin-right: 10px"/>联系客服
        </button>
        <button class="contact-btn" @click="contactSupport">
          <img src="../commodity/img/gwc.svg" style="margin-right: 10px"/>进入商店
        </button>
      </div>
    </div>

    <!-- 如果商家信息还在加载中，显示 LayUI 骨架屏 -->
    <div v-else class="business-card skeleton">
      <!-- 骨架头像 -->
      <div class="business-avatar skeleton-avatar"></div>
      <div class="business-info">
        <div class="skeleton-item skeleton-title"></div>
        <div class="skeleton-item skeleton-line"></div>
        <div class="skeleton-item skeleton-line"></div>
      </div>
      <div class="business-actions">
        <div class="skeleton-item skeleton-button"></div>
        <div class="skeleton-item skeleton-button"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRoute } from "vue-router";

// 获取路由参数
const route = useRoute();
const merchantId = route.params.merchantid; // 假设路由参数中包含 merchantid
console.log("商家id", merchantId);

// 商家信息状态
const businessInfo = ref(null);

// 获取商家信息
const fetchBusinessInfo = async () => {
  try {
    const response = await axios.get("http://localhost:8080/bus/business", {
      params: { merchantid: merchantId } // 使用查询参数传递商家 ID
    });
    if (response.data.status === 200) {
      businessInfo.value = response.data.data[0];
    } else {
      console.error("获取商家信息失败:", response.data);
    }
  } catch (error) {
    console.error("请求商家信息失败:", error);
  }
};

// 在组件挂载时请求数据
onMounted(() => {
  fetchBusinessInfo();
});

// 点击联系客服按钮的操作
const contactSupport = () => {
  alert("联系客服功能暂未实现！");
};
</script>

<style scoped>
.business {
  width: 80%;
}

.business-card {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 20px;
  padding: 15px 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
}

/* 商家头像样式 */
.business-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%; /* 圆形头像 */
  object-fit: cover;
}

/* 骨架屏头像样式 */
.skeleton-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #e0e0e0;
}

/* 商家信息样式 */
.business-info {
  flex: 1;
  margin-left: 20px;
}

.business-name {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: #333;
}

.business-rating {
  margin: 5px 0 0;
  font-size: 14px;
  color: #666;
}

.business-actions {
  margin-left: 20px;
}

/* 联系按钮样式 */
.contact-btn {
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
  margin: 10px;
}

.contact-btn:hover {
  background-color: #0056b3;
}

/* 骨架屏样式 */
.skeleton {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 20px;
  padding: 15px 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.skeleton-item {
  background-color: #e0e0e0;
  border-radius: 5px;
}

.skeleton-title {
  width: 60%;
  height: 20px;
  margin-bottom: 10px;
}

.skeleton-line {
  width: 100%;
  height: 15px;
  margin-bottom: 10px;
}

.skeleton-button {
  width: 120px;
  height: 40px;
  margin-right: 10px;
  background-color: #e0e0e0;
  border-radius: 8px;
}

/* 加载中提示 */
.loading {
  text-align: center;
  font-size: 18px;
  color: #999;
}
</style>
